<template>
  <div class="musicpage">
    <!-- {{userimg.tracks[0].name}} -->
    <div class="_header">
      <div class="img-log">
        <!-- userimg.coverImgUrl 图片 -->
        <img :src="musiclist.coverImgUrl" width="200" height="200" />
      </div>
      <div>
        <h4><el-tag type="danger">歌单</el-tag>{{ musiclist.name }}</h4>
        <div class="user_img_box">
          <div class="block">
            <el-avatar
              class="userimg"
              v-if="musiclist.creator"
              :size="40"
              :src="musiclist.creator.avatarUrl"
            ></el-avatar>
          </div>
          <span v-if="musiclist.creator" style="color: blue; cursor: pointer">
            <!-- 名字ID -->
            {{ musiclist.creator.nickname }}
          </span>
          <!-- 时间转换 -->
          {{
            new Date(musiclist.createTime)
              .toLocaleDateString()
              .replace("/", "-")
              .replace("/", "-")
          }}创建
        </div>
        <el-button type="danger" round icon="el-icon-caret-right"> 播放全部</el-button>
        <el-button round icon="el-icon-folder-add"
          >收藏({{ musiclist.subscribedCount }})</el-button
        >
        <el-button round icon="el-icon-upload"
          >分享({{ musiclist.shareCount }})</el-button
        >
        <el-button round icon="el-icon-download">下载全部</el-button>
        <div v-if="musiclist.tags" class="num_music" style="margin-top: 5px">
          标签:<span class="span1">{{ musiclist.tags.join("/") }}</span>
        </div>
        <div class="num_music">
          歌曲:<span>{{ musiclist.trackCount }}</span> 播放量:<span
            >{{ Math.round(musiclist.playCount / 10000) }}万</span
          >
        </div>
        <p v-if="musiclist.description">
          简介:<span>{{ musiclist.description }}</span>
        </p>
      </div>
    </div>
    <div class="_content">
      <ul>
        <li
          v-for="(item, index) in navlist"
          :key="index"
          @click="tab(index)"
          :style="n == index ? { transform: 'scale(1.3)' } : ''"
        >
          {{ item.list }}
          <!-- <span v-if="index == 1">({{ total }})</span> -->
        </li>
      </ul>
      <input
        type="text"
        class="_seachmusic"
        v-model="input"
        v-show="n == 0"
        placeholder="搜索歌单音乐"
      />
    </div>
    <div class="_musiclist">
      <!-- 音乐列表 -->
        <component :is="tmp"></component>
      <!-- <Musiclist />
        <Comment/> -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Comment from "../../components/comment.vue";
import Musiclist from "../../components/musiclist.vue";
import Collector from "../../components/Collector.vue";
import Api from '../../lib/api'
export default {
  name: "musicpage",
  data() {
    return {
      input: "",
      navlist: [
        { list: "歌曲列表", tmp: "Musiclist" },
        { list: "评论", tmp: "Comment" },
        { list: "收藏者", tmp: "Collector" },
      ],
      n: "",
      tmp: "Musiclist",
      userimg: "",
    };
  },
  components: {
    Musiclist,
    Comment,
    Collector,
  },
  computed: {
    ...mapState(["lcodata", "musiclist", "soterid", "commmetn", "total"]),
  },
  created() {
    let _this=this
    // 通过网页上的id 获取歌单详情接口调用
    Api.songlist(_this)
     // 通过网页上的id 获取歌单详情接口调用
    // this.$axios
    //   .get("playlist/detail", {
    //     //通过url上面的id获取歌单详情信息
    //     params: {
    //       id: this.$route.query.id,
    //     },
    //   })
    //   .then((res) => {
    //     // console.log(res.data.playlist);
    //     this.userimg = res.data.playlist;
    //     this.$store.commit("upmusiclist", res.data.playlist);
    //   });
  },
  methods: {
    tab(index) {
      //控制组件切换
      this.n = index;
      this.tmp = this.navlist[index].tmp;
    },
  },
};
</script>

<style lang="scss" scope>
.musicpage {
  padding: 20px;
  height: 100%;
  ._header {
    font-size: 14px;
    display: flex;
    .img-log {
      margin-right: 20px;
      border-radius: 10px;
      border: 1px solid #8989;
      width: 200px;
      height: 200px;
      img {
        border: none;
        border-radius: 10px;
        width: 200px;
        height: 200px;
      }
    }
    h4 {
      display: flex;
      align-items: center;
      .el-tag {
        margin-right: 5px;
      }
    }
    .user_img_box {
      display: flex;
      align-items: center;
      .userimg {
        cursor: pointer;
        width: 20px;
        height: 40px;
        border-radius: 50%;
        transform: scale(0.8);
      }
    }
    .num_music {
      margin: 0px 0px 5px 0px;
      span {
        margin-left: 5px;
        color: #8989;
      }
      .span1 {
        cursor: pointer;
        color: blue;
      }
    }
    p {
      span {
        margin-left: 5px;
        color: #8989;
      }
    }
  }
  ._content {
    display: flex;
    justify-content: space-between;
    margin: 5px 0px;
    ul {
      margin: 5px;
      padding: 0px;
      display: flex;
      list-style-type: none;
      li {
        margin-right: 20px;
        cursor: pointer;
      }
    }
    ._seachmusic {
      padding-left: 10px;
      border-radius: 20px;
      height: 25px;
      border: none;
    }
  }
  ._musiclist {
    background: #ffffff;
    padding: 30px;
    min-width: 900px;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
}
</style>
